<template>
  <div class="personeldistribution">
    <div class="second">
      <middle-title title="优秀梯二人员"></middle-title>
      <div class="top">
        <span class="label">优秀人员：</span>
        <span class="value">{{ total }}</span>
        <span class="unit">人</span>
      </div>
      <div class="bottom">
        <el-carousel :interval="5000">
          <el-carousel-item v-for="(item, index) in Math.ceil(total / 3)" :key="item">
            <div class="personbox">
              <div
                class="personItem"
                v-for="(it, id) in personList.slice(index * 3, (index + 1) * 3)"
                :key="id"
              >
                <div class="name">{{ it.name }}</div>
                <div class="image">
                  <el-image style="width: 100%; height: 100%" :src="it.imageUrl" fit="fill" />
                </div>
                <div class="message">
                  <div class="resident">{{ it.resident }}</div>
                  <div class="job">{{ it.job }}</div>
                  <div class="num">参加{{ it.num }}次活动</div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="society">
      <middle-title title="社区人员分布"></middle-title>
      <div class="barEchart" ref="barEchart"></div>
    </div>
    <person-detail></person-detail>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
import PersonDetail from './PersonDetail.vue'
const echarts = inject('echarts')
let total = ref(12)
let barEchart = ref(null)
let myEchart = null
let personList = ref([
  { name: '人物1', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物2', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物3', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物4', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物5', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物6', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物7', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物8', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物9', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物10', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物11', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' },
  { name: '人物12', job: 'xxxxx职位', resident: 'xxxxx居民区', num: 10, imageUrl: '' }
])
let xdata = ['牌楼', '陆迎', '陆兴', '明日星城', '方斜', '学宫']
let ydata = [
  [30, 35, 40, 42, 35, 30],
  [20, 22, 28, 23, 24, 19]
]
onMounted(() => {
  setBarEchart()
})
const setBarEchart = () => {
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(barEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 16 // 字体大小
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      // data: ['销售水量', '主营业务'],
      top: '4%',
      //   right: '5%',
      textStyle: {
        color: '#ffffff',
        fontSize: 14
      }
    },
    grid: {
      top: '15%',
      left: '0%',
      right: '2%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      data: xdata,
      axisLabel: {
        color: '#fff',
        fontSize: 14
        // rotate: 45
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#32AFFF'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '单位：人',
        nameTextStyle: {
          color: '#ffff',
          fontSize: 15
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#32AFFF'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          fontSize: 17
        },
        splitLine: {
          //修改背景线条样式
          show: true, //是否展示
          lineStyle: {
            type: 'dashed',
            color: '#5DC0FF',
            opacity: 0.35
          }
        }
      },
      {
        type: 'value',
        name: '单位：次',
        nameTextStyle: {
          color: '#ffff',
          fontSize: 15
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#32AFFF'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          fontSize: 17
        },
        splitLine: {
          //修改背景线条样式
          show: false //是否展示
        }
      }
    ],
    series: [
      {
        type: 'bar',
        name: 'T2人数',
        barWidth: 17,
        yAxisIndex: 1,
        itemStyle: {
          borderRadius: [20, 20, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 226, 253, 1)' },
            { offset: 0.5, color: 'rgba(0, 226, 253, 0.5)' },
            { offset: 1, color: 'rgba(0, 226, 253, 0)' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: 'rgba(0, 226, 253, 1)'
          }
        },
        data: ydata[0],
        zlevel: 1
      },
      {
        name: 'T2参与活动次数',
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 10,
        lineStyle: {
          color: '#fec415' // 线条颜色
        },
        itemStyle: {
          color: '#FFDB14',
          shadowBlur: 15,
          shadowColor: '#FFDB14',
          shadowOffsetX: 0,
          shadowOffsetY: 0
        },
        areaStyle: {
          //区域填充样式
          //   normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: 'rgba(255, 197, 20, 0.5)' },
              { offset: 0.5, color: 'rgba(255, 197, 20, 0.2)' },
              { offset: 0.8, color: 'rgba(255, 197, 20, 0)' }
            ],
            false
          ),

          shadowColor: 'rgba(255, 197, 20, 1)', //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          //   }
          zlevel: 0
        },
        data: ydata[1]
      }
    ]
  }
  myEchart.setOption(option)
}
</script>
<style lang="scss" scoped>
.personeldistribution {
  display: flex;
  justify-content: space-between;
  height: 414px;
  box-sizing: border-box;
  //   background-color: red;
  .second {
    .top {
      position: relative;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .label {
        font-size: 19px;
        font-weight: bold;
        color: #ffffff;
        margin-left: 61px;
      }
      .value {
        font-size: 35px;
        font-weight: bold;
        color: #ffd800;
      }
      .unit {
        font-size: 16px;
        color: #ffffff;
        margin-left: 12px;
      }
      &::before {
        content: '';
        position: absolute;
        top: 2px;
        width: 49.5px;
        height: 52px;
        background: url('@/assets/images/firstpage/good.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .bottom {
      .personbox {
        display: flex;
        justify-content: space-between;
        height: 500px;
        .personItem {
          width: 147.5px;
          text-align: center;
          background: url('@/assets/images/firstpage/personBg.png') no-repeat;
          background-size: 100% 208px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .name {
            font-size: 25px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #ffffff;
            // text-shadow: 0px 3px 4px #051c37;

            background: linear-gradient(0deg, #ffffff 0%, #ffb922 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .image {
            width: 123px;
            height: 168px;
          }
          .message {
            width: 100%;
            height: 110px;
            font-size: 15px;
            font-weight: bold;
            color: #ffffff;
            background: url('@/assets/images/firstpage/personBottom.png') no-repeat;
            background-size: 142.5px 33px;
            background-position: 0 50px;
            .resident {
              margin-top: 11px;
            }
          }
        }
      }
    }
  }
  .society {
    .barEchart {
      width: 502px;
      height: 355px;
      //   background-color: blue;
    }
  }
}
</style>
